<template>
  <!-- <span>作品动态11</span> -->
  <div class="zuoping">
    <topNav></topNav>
    <div class="dongtai" ref="dongtaiContent" id="maodian">
      <a href="#maodian" class="el-icon-top maodiao" ref="maodian"> </a>
      <h1>按照菜谱，秀出你的作品</h1>
      <div class="time">
        <span class="popular">正在流行</span>
        <span>24小时最佳</span>
      </div>
      <!-- 商品内容 -->
      <div class="goodsContent">
        <div v-for="item in goodsarr" :key="item.id">
          <!-- 商品盒子 -->
          <div class="goodsbox">
            <!-- 图片盒子 -->
            <!-- 点击图片盒子，模态盒子出现 -->
            <!-- <div class="imgbox" @click="showMotai('MoTai')"> -->
            <div
              class="imgbox"
              @mouseenter.self="showFugai"
              @mouseleave.self="hiddenFugai"
            >
              <!-- 模态弹窗 动态加载组件  实现失败-->
              <!-- <components :is="zujian"></components> -->
              <img :src="item.img" alt="" class="imgs" />
              <!-- 覆盖盒子 -->
              <div class="fugaiBox" ref="fugaiBox">
                <div
                  class="fugai"
                  @click="
                    showMotai(
                      item.img,
                      item.touxiang,
                      item.username,
                      item.tip,
                      item.title,
                      item.opusid,
                      item.id,
                      item.pushtime
                    )
                  "
                >
                  <!-- 小点赞按钮 -->
                  <div
                    class="like"
                    @click.stop="zanFn($event)"
                    :data-zan="item.opusid"
                  >
                    <Add v-show="show" :show.sync="show" :success="msg"></Add>
                    <NotLogin v-show="islogin"></NotLogin>
                    <span
                      class="iconfont icon-aixin"
                      :data-zan="item.opusid"
                    ></span>
                    <span ref="fugai_zan" :data-zan="item.opusid">赞</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="goodsBottom">
              <!-- 名称 -->
              <div class="title" @click="showMotai">{{ item.title }}</div>
              <!-- 描述 -->
              <div class="describe">{{ item.tip }}</div>
              <!-- 控件按钮 -->
              <div class="kongjian">
                <!-- <span> 昨天&nbsp;&nbsp;</span> -->
                <span>{{ item.pushtime | handlerTime }}</span>
                <span class="kongjian_num el-icon-star-off">217</span>
                <span class="kongjian_comment el-icon-chat-square">12</span>
              </div>
              <!-- 发布者信息  跳转至作者主页-->
              <router-link to="">
                <div class="fabu">
                  <img :src="item.touxiang" alt="" />
                  <span class="author">{{ item.username }}</span
                  >&nbsp;&nbsp;
                  <span class="where">{{ item.address }}</span>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 覆盖盒子 -->

      <!-- 模态弹窗 -->
      <div class="goods_motai" @click="showContent" ref="motai">
        <!-- <div class="paiban"> -->
        <!-- 用户动态展示区 -->
        <div class="goodsShow">
          <div class="goods_top">
            <img :src="img" alt="" class="goodsPic" />

            <div class="userInfo">
              <!-- 左边第一块 用户头像  跳转至用户的个人信息去-->
              <router-link to="">
                <img :src="touxiang" alt="" class="touxiang" />
              </router-link>
              <!-- 中间 -->
              <div class="infoMessage">
                <div class="infofirst">
                  <!--  跳转至用户的个人信息去 -->
                  <router-link to="">{{ username }}</router-link>
                  <!-- 要判断是否是超赞用户，是才有皇冠，才跳转到超赞标准页面 -->
                  <!-- <router-link to=""></router-link> -->
                  <!-- 话题 跳转到响应话题页面 -->
                  <span class="share">分享作品</span>
                  <router-link to="" class="huati">{{ title }}</router-link>
                </div>
                <div class="infosecond">
                  <router-link to="">#爱上「夏」厨房#</router-link>
                  <p>{{ tip }}</p>
                  <!-- <p>清甜鲜香营养好味道</p> -->
                  <router-link to="">#午餐•2021年8月29日#</router-link>
                  <div class="infoTime">
                    <router-link class="paishe" to=""
                      >Android拍摄于</router-link
                    >
                    <span>{{ pushtime }}</span>
                  </div>
                </div>
              </div>
              <!-- 右边 -->
              <div
                class="infoZan"
                @click.stop="zanFn($event)"
                :data-zan="this.opusid"
              >
                赞
              </div>
              <Add v-show="show" :show.sync="show" :success="msg"></Add>
            </div>
          </div>
          <div class="goods_bottom">
            <div class="bottomPaiban">
              <h3>{{ this.renarr.length }}赞</h3>
              <div class="dianzanRen">
                <div class="imgbox">
                  <img
                    v-for="item in renarr"
                    :key="item.id"
                    :src="item.touxiang | handimg"
                    alt=""
                  />
                </div>
                <span
                  class="ren_more"
                  @click.stop="moredianzan"
                  ref="ren_more"
                  >{{ morezan }}</span
                >
              </div>
              <h3>{{ this.comments.length }}回应</h3>
              <div class="commentsBox" v-for="item in comments" :key="item.id">
                <div class="comments">
                  <img :src="item.touxiang" alt="" />
                  <div class="com_infos">
                    <!-- 跳转至用户的资料 -->
                    <router-link to="">{{ item.username }}</router-link>
                    <span> &nbsp; {{ item.time }} | </span>
                    <!-- 判断是否登录注册，否则跳转登录页面 -->
                    <router-link to="">回复</router-link>
                    <p>{{ item.neirong }}</p>
                  </div>
                </div>
              </div>
              <div class="lowerBox">
                你需要
                <router-link to="/login" class="font_color" @click="denglu"
                  >登录</router-link
                >
                <span>才能回应，还没有账号？</span>
                <router-link to="/register" class="font_color">注册</router-link
                >一个
              </div>
            </div>
          </div>
        </div>
        <!-- 用户个人信息 -->
        <div class="goodsUser">
          <!-- 用户头像及其他信息 -->
          <div class="user_message">
            <img :src="touxiang" alt="" />
            <div class="guanzhu">
              <!-- 跳转至用户个人资料 -->
              <router-link to="" class="guanzhu_name">{{
                username
              }}</router-link>
              <div class="shuju">
                <router-link to="">{{ guanzhu.length }}</router-link
                >&nbsp;<span>关注&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <router-link to="">{{ caipuarr.length }}</router-link
                >&nbsp;<span>菜谱&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                <router-link to="">{{ workarr.length }}</router-link
                >&nbsp;<span>作品&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              </div>
            </div>
          </div>
          <!-- 关注 -->
          <div class="guanzhuBtn" @click.stop="followFn()" ref="follow_btn">
            关注
          </div>
          <Add v-show="show" :show.sync="show" :success="msg"></Add>
          <NotLogin v-show="islogin"></NotLogin>
          <div class="qita all">
            <h3>{{ username }}的其他作品</h3>
            <span>全部</span>
          </div>
          <div class="qita_work all_work">
            <img
              :src="item.img"
              alt=""
              v-for="item in workarr"
              :key="item.id"
            />
          </div>
          <div class="caipu all">
            <h3>{{ username }}的菜谱</h3>
            <span>全部</span>
          </div>
          <div class="caipu_work all_work">
            <img
              :src="item.img"
              alt=""
              v-for="item in caipuarr"
              :key="item.id"
            />
          </div>
        </div>
        <!-- </div> -->
        <div class="chacha" @click="showContent">
          <img src="./img/chacha.png" alt="" />
        </div>
      </div>
    </div>
    <button-nav />
  </div>
</template>
<script>
import topNav from "../../components/topNav.vue";
import buttonNav from "../../components/buttonNav.vue";
import NotLogin from "./components/notLogin.vue";
import Add from "./components/Add.vue";
export default {
  components: {
    topNav,
    buttonNav,
    NotLogin,
    Add,
  },

  data() {
    return {
      flag: 0,
      // followInfo: "关注",
      msg: "",
      denglu: false,
      islogin: false,
      show: false,
      add: "",
      a: "",
      img: "",
      touxiang: "",
      username: "",
      tip: "",
      title: "",
      opusid: "",
      userid: "",
      pushtime: "",
      goodsarr: [],
      renarr: [],
      comments: [],
      workarr: [],
      caipuarr: [],
      guanzhu: [],
      morezan: "更多",
    };
  },
  filters: {
    handlerTime(arg) {
      var dt1 = new Date(arg);
      var dt2 = new Date();
      var abstime = dt2.getTime() - dt1.getTime();
      if (0 <= abstime && abstime < 1000 * 60) {
        return "刚刚";
      } else if (1000 * 60 <= abstime && abstime < 1000 * 60 * 60) {
        var m = new Date(abstime).getMinutes() + "";
        return `${m}分钟前`;
      } else if (1000 * 60 * 60 <= abstime && dt1.getDate() == dt2.getDate()) {
        var m = dt1.getMinutes() + "";
        var h = dt1.getHours();
        return `今天 ${h}:${m.padStart(2, "0")}`;
      } else if (dt1.getDate() + 1 == dt2.getDate()) {
        var m = dt1.getMinutes() + "";
        var h = dt1.getHours();
        return `昨天 ${h}:${m.padStart(2, "0")}`;
      } else if (dt1.getDate() + 2 == dt2.getDate()) {
        var m = dt1.getMinutes() + "";
        var h = dt1.getHours();
        return `前天 ${h}:${m.padStart(2, "0")}`;
      } else {
        var m = parseInt(abstime / 3600 / 1000 / 24);
        return `${m}天前`;
      }
    },
    handimg(url) {
      console.log(url, "头像");
      var url1 = url;
      //   console.log(url1, "字符串");
      var urlarr = url1.substr(0, 7);
      // console.log(urlarr, "拆分");
      if (urlarr == "/public") {
        url1 = url1.replace("/public", "/dzf");
        return url1;
      } else {
        return url1;
      }
    },
  },
  methods: {
    // 关注
    followFn() {
      // 判断用户是否登录
      // this.msg = "关注成功";
      var islogin = localStorage.getItem("islogin");
      if (!islogin) {
        // alert("你还未登录哟");
        this.islogin = "true";
      } else {
        // 向后端发送数据，判断是否登录
        console.log(this.userid, "用户");
        this.$axios("/dzf/follow", {
          params: { star: this.userid },
        }).then((res) => {
          console.log(res, 1112222);
          if (res.data.code == 2010) {
            // 已关注
            // this.followInfo = res.data.info;
            this.$refs.follow_btn.innerHTML = "已关注";
            this.$refs.follow_btn.style.backgroundColor = "gray";
          } else if (res.data.code == 4010) {
            // 未关注
            this.$axios("/dzf/follow1", {
              params: { star: this.userid },
            }).then((res) => {
              console.log(res);
              this.show = "true";
              this.msg = "关注成功";
              this.$refs.follow_btn.innerHTML = "已关注";
              this.$refs.follow_btn.style.backgroundColor = "gray";
            });
          }

          // alert("关注成功");
        });
      }
    },
    // 点赞
    zanFn(e) {
      var e = event || e;
      // 判断用户是否登录，未登录跳转至登录页面
      var islogin = localStorage.getItem("islogin");
      console.log(islogin, "是否登录");
      if (!islogin) {
        console.log("未登录");
        // this.a = arg;
        this.islogin = "true";
        // alert("你还未登录哟");
      } else {
        // 已登录就把用户添加到作品数据库，给点赞表添加一条数据
        // 判断用户是否点赞过
        console.log(e.target, "目标");
        console.log(e.target.dataset.zan, "作品id");
        this.$axios("/dzf/addZan", {
          params: { opusid: e.target.dataset.zan },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 2008) {
            this.show = "true";
            this.msg = res.data.info;
          } else if (res.data.code == 4008) {
            // console.log("还没有点赞");
            this.$axios("/dzf/addZan1", {
              params: { opusid: e.target.dataset.zan },
            }).then((res2) => {
              // console.log(res2);
              this.show = "true";
              this.msg = "点赞成功";
            });
          }
        });
      }
    },
    showFugai(e) {
      e.target.children[1].style.display = "block";
    },
    hiddenFugai(e) {
      e.target.children[1].style.display = "none";
    },
    // 点击更多获取更多点赞量
    moredianzan() {
      console.log(this.renarr.length);
      this.$axios("/dzf/moredianzan", {
        params: {
          opusid: this.opusid,
          length: this.renarr.length,
        },
      }).then((res3) => {
        console.log(res3, 1111111111111);
        // this.$refs.ren_more.style.display = "none";
        if (res3.data.length) {
          this.renarr = this.renarr.concat(res3.data);
        } else {
          this.morezan = "没有更多了";
        }
      });
    },
    showMotai(img, touxiang, username, tip, title, opusid, userid, pushtime) {
      console.log("模态");
      this.img = img;
      this.touxiang = touxiang;
      this.username = username;
      this.tip = tip;
      this.title = title;
      this.opusid = opusid;
      this.userid = userid;
      this.pushtime = pushtime;
      // data中的opusid改变了才去网络请求
      // 请求评论量
      this.$axios("/dzf/comments", {
        params: {
          opusid: this.opusid,
        },
      }).then((res1) => {
        console.log(res1.data);
        this.comments = res1.data;
      });
      // 请求点赞量
      this.$axios("/dzf/dianzan", {
        params: {
          opusid: this.opusid,
        },
      }).then((res2) => {
        console.log(res2, 23232323232);
        this.renarr = res2.data;
      });
      // 点击更多请求更多点赞量
      // this.moredianzan();
      // 请求其他作品
      this.$axios("/dzf/qitawork", {
        params: {
          userid: this.userid,
        },
      }).then((res2) => {
        this.workarr = res2.data;
      });
      // 请求其他菜谱
      this.$axios("/dzf/qitacaipu", {
        params: {
          userid: this.userid,
        },
      }).then((res2) => {
        this.caipuarr = res2.data;
      });
      // 请求关注量
      this.$axios("/dzf/guanzhu", {
        params: {
          userid: this.userid,
        },
      }).then((res2) => {
        this.guanzhu = res2.data;
      });

      let motai = this.$refs.motai;
      motai.style.display = "block";
      motai.style.overflowY = "scroll";

      console.log(this.$refs.dongtaiContent);
      this.$refs.dongtaiContent.style.overflowY = "hidden";
      document.body.style.overflowY = "hidden";
    },
    showContent() {
      let motai = this.$refs.motai;
      motai.style.display = "none";
      motai.style.overflowY = "scroll";
      document.body.style.overflowY = "scroll";
    },
    // 防抖
    fangdouTool(fn, await1) {
      var timer;
      function fm(e) {
        if (timer) {
          clearTimeout(timer);
          timer = setTimeout(() => {
            fn.call(this, e);
          }, await1);
        } else {
          timer = setTimeout(() => {
            fn.call(this, e);
          }, await1);
        }
      }
      return fm;
    },

    // 加载更多
    ff() {
      // console.log(this.goodsarr.length);
      // console.log("加载更多");
      this.$axios("/dzf/more", {
        params: {
          start: this.goodsarr.length,
        },
      }).then((res) => {
        this.goodsarr = this.goodsarr.concat(res.data);
      });
    },

    scrollFn() {
      // 变量 scrollHeight 是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //变量 windowHeight 是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 变量scrollTop为当前页面的滚动条纵坐标位置
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 滚动条到底部得距离 = 滚动条的总高度 - 可视区的高度 - 当前页面的滚动条纵坐标位置
      var scrollBottom = scrollHeight - windowHeight - scrollTop;
      // console.log(scrollBottom, "scrollBottom");
      // console.log(scrollTop, "scrollTop");
      if (scrollBottom < 100) {
        // this.fangdouTool(this.ff, 17);
        this.ff();
      }
      if (scrollTop > 500) {
        this.$refs.maodian.style.display = "none";
        this.$refs.maodian.style.display = "block";
      } else if (scrollTop < 500) {
        this.$refs.maodian.style.display = "block";
        this.$refs.maodian.style.display = "none";
      }
    },
  },

  mounted() {
    // 监听页面滚动 //懒加载
    window.addEventListener("scroll", this.fangdouTool(this.scrollFn), 1000);
    // 向后端请求数据
    this.$axios("/dzf/dzfzuoping").then((res) => {
      console.log(res.data, "作品");
      this.goodsarr = res.data;
      // console.log(this.opusid, 121212121212);
      // console.log(this.goodsarr, 7777777);
    });
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: rgb(221, 57, 21);
}
// 锚点
.maodiao {
  position: fixed;
  right: 50px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  display: none;
  background-color: #ccc;
  bottom: 0;
  font-size: 40px;
}
// 动态内容
.dongtai {
  width: 1200px;
  margin: 0 auto;
  h1 {
    width: 1080px;
    margin: 0 auto;
  }
  .time {
    width: 1080px;
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
    // margin: 20px 0;
    .popular {
      color: red;
      margin-right: 50px;
    }
  }
  // 商品内容
  .goodsContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    // border: 1px solid yellow;
    .goodsbox {
      width: 280px;
      height: 484px;
      margin: 25px 58px;
      border: 1px solid #ccc;
      position: relative;
      .imgbox {
        width: 278px;
        height: 280px;
        border: 1px solid purple;
        // 图片
        .imgs {
          width: 278px;
          height: 280px;
        }
        //  覆盖盒子
      }
      .goodsBottom {
        width: 260px;
        margin: 0 auto;
        .title {
          color: rgb(221, 57, 21);
          margin-top: 15px;
          margin-bottom: 15px;
        }
        .describe {
          font-size: 14px;
          height: 35px;
        }
        .kongjian {
          color: #909090;
          font-size: 14px;
          margin-top: 30px;
          .kongjian_num {
            margin-left: 100px;
            margin-right: 10px;
          }
        }
        .fabu {
          margin-top: 20px;
          vertical-align: middle;
          display: flex;
          font-size: 14px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          .author {
            margin-left: 10px;

            margin-top: 5px;
          }
          .where {
            color: #909090;
            margin-top: 6px;
          }
        }
      }
    }
  }
}
// 覆盖盒子
.fugaiBox {
  width: 278px;
  height: 280px;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  .fugai {
    width: 278px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(10, 10, 10, 0.2);
    .like {
      color: #fff;
      font-size: 14px;
      width: 70px;
      height: 30px;
      background-color: rgb(221, 57, 21);
      text-align: center;
      line-height: 30px;
      border: 2px solid rgba(10, 10, 10, 0.1);
      span {
        margin-left: 8px;
      }
    }
  }
}
// 模态弹窗
.goods_motai {
  width: 1336px;
  height: 650px;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 180;
  background-color: rgba(64, 64, 64, 0.8);
  // .paiban {
  //   margin-top: 40px;
  //   display: flex;
  //   justify-content: flex-start;
  .goodsShow {
    width: 640px;
    margin-left: 180px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    background-color: rgba(64, 64, 64, 0.1);
    .goods_top {
      background-color: #fff;
      .goodsPic {
        width: 620px;
        margin: 10px;
      }
      .userInfo {
        // height: 300px;
        // border: 1px solid pink;
        width: 600px;
        margin: 0 auto;
        display: flex;
        .touxiang {
          width: 48px;
          height: 48px;
        }
        .infoMessage {
          margin-left: 20px;
          .infofirst {
            .share {
              margin-left: 10px;
              color: #ccc;
            }
            .huati {
              margin-left: 10px;
            }
          }
          .infoTime {
            color: #ccc;
            font-size: 14px;
            margin: 30px 0;
            .paishe {
              color: #ccc;
              margin-right: 10px;
            }
          }
        }
        .infoZan {
          width: 70px;
          height: 40px;
          background-color: rgb(221, 57, 21);
          color: #fff;
          font-size: 16px;
          text-align: center;
          margin-left: 200px;
          line-height: 40px;
        }
      }
    }

    .goods_bottom {
      width: 640px;
      background-color: #fff;
      // height: 500px;
      margin-top: 10px;
      // border: 1px solid red;
      h3 {
        color: rgb(200, 190, 172);
      }
      .bottomPaiban {
        width: 600px;
        margin: 0 auto;
        .dianzanRen {
          // height: 34px;
          width: 640px;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 30px;
          margin-top: 10px;
          position: relative;
          .imgbox {
            width: 500px;
            // margin: 0 auto;
            // border: 1px solid red;
            img {
              width: 30px;
              height: 30px;
              margin: 2px 3px;
            }
          }

          .ren_more {
            font-size: 14px;
            color: red;
            position: absolute;
            right: 100px;
            color: gray;
            // height: 0px;
          }
        }
      }
      .commentsBox {
        .comments {
          width: 600px;
          // height: 100px;
          // background-color: pink;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          margin-bottom: 40px;
          img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }
          .com_infos {
            margin-left: 20px;
            font-size: 14px;
            a {
              color: black;
              font-size: 14px;
            }
            span {
              color: gray;
            }
          }
        }
      }
    }
    .lowerBox {
      margin-top: 20px;
      width: 640px;
      height: 40px;
      // border: 1px solid red;
      font-size: 16px;
      margin-bottom: 20px;
      .font_color {
        color: rgb(221, 57, 21);
        cursor: pointer;
      }
    }
  }
  // 展示用户个人信息
  .goodsUser {
    width: 300px;
    // height: 850px;
    // border: 1px solid yellow;
    background-color: #fff;
    position: absolute;
    right: 180px;
    top: 50px;
    display: flex;
    flex-wrap: wrap;
    // margin-left: 40px;
    // 信息
    .user_message {
      width: 260px;
      height: 82px;
      margin: 10px auto;
      display: flex;
      // border: 1px solid pink;
      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
      .guanzhu {
        margin-left: 20px;
        // border: 1px solid red;
        .guanzhu_name {
          color: rgb(221, 57, 21);
        }
        .shuju {
          margin-top: 10px;
          a {
            color: black;
          }
          span {
            color: gray;
            font-size: 14px;
          }
        }
      }
    }
    // 关注
    .guanzhuBtn {
      width: 260px;
      height: 30px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      margin: 0 auto;
      font-size: 14px;
      margin-left: 20px;
      background-color: rgb(221, 57, 21);
    }
    // 其他作品
    .all {
      width: 260px;
      margin: 10px auto;
      display: flex;
      justify-content: flex-start;
      h3 {
        color: rgb(192, 174, 125);
      }
      span {
        color: rgb(221, 57, 21);
        font-size: 14px;
        margin: 1px 30px;
      }
    }
    // 其他作品的内容
    .all_work {
      width: 260px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 20px auto;
      img {
        width: 80px;
        height: 80px;
        margin: 2px;
      }
    }
  }
  // }
  .chacha {
    position: fixed;
    right: 47px;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
